<template>
  <div class="entranceguard-right borderStyle">
    <!-- <div class="entranceguard-right-title centerbox">门禁</div> -->
    <div class="entranceguard-right-shuffl">
      <div ref="scroll" class="right-top-rotation">
        <div class="tans" :style="{ left: lefts + '%' }">
          <div
            class="rotation-img"
            v-for="(item, index) in equipInfo"
            :key="index"
            @click="visited(index,item)"
            :class="visi === index ? 'visited' : ''"
          >
            <img class="cont" :src="item.src" alt srcset />
            <img class="bg" src="../../../../assets/img/OnlineMonitor/dz.png" alt srcset />
            <div class="rotation-text">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div :class="colorLeft === 0 ? 'icons' : ''" class="icon icon-left">
        <span @click="left" class="iconfont iconxiayibu-copy"></span>
      </div>
      <div :class="colorRight === 0 ? 'icons' : ''" class="icon icon-right">
        <span @click="right" class="iconfont iconxiayibu-copy"></span>
      </div>
    </div>
    <div class="entranceguard-right-equipment">
      <div class="single-box" v-for="(item, i) of cylinderData" :key="i">
        <div class="single-value single-po">{{item.value}}</div>
        <div class="single-name">{{item.name}}</div>
      </div>
    </div>
    <div class="entranceguard-right-table">
      <GuardTable :datas="tableData2" @iconclick="iconclick" />
    </div>
    <!-- 历史弹窗 -->
    <el-dialog
      :title="popupData.deviceName+'历史'"
      :visible.sync="historyPopupStatus"
      width="50%"
      :before-close="handleClose"
    >
      <histroyPopUp v-if="historyPopupStatus" :datas="popupData" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import GuardTable from "./components/GuardTable.vue";
import { LocksAPIModule } from "@/store/modules/locks";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import histroyPopUp from "./components/historyPopUp.vue";
import _ from "lodash";
@Component({
  components: {
    GuardTable,
    histroyPopUp,
  },
})
export default class EntranceGuardPageRight extends Vue {
  public lefts: any = 0;
  public colorLeft: number = 0;
  public colorRight: number = 0;
  public visi: any = "";
  public X: any = 0;

  public equipOBJ = {
    保护室: require("../../../../assets/img/area/保护室.png"),
    地下电缆层: require("../../../../assets/img/area/地下电缆层.png"),
    电抗器室: require("../../../../assets/img/area/电抗器室.png"),
    电容器室: require("../../../../assets/img/area/电容器室.png"),
    工器具室: require("../../../../assets/img/area/工器具室.png"),
    接地变室: require("../../../../assets/img/area/接地变室.png"),
    开关柜测温: require("../../../../assets/img/area/开关柜测温.png"),
    开关室: require("../../../../assets/img/area/开关室.png"),
    其他: require("../../../../assets/img/area/其他.png"),
    室外: require("../../../../assets/img/area/室外.png"),
    蓄电池室: require("../../../../assets/img/area/蓄电池室.png"),
    站用变室: require("../../../../assets/img/area/站用变室.png"),
    主变室: require("../../../../assets/img/area/主变室.png"),
    主控室: require("../../../../assets/img/area/主控室.png"),
  };
  // 当前选中的区域
  currentArea = {
    area: "",
  };
  // 安全防范
  get getDeviceInfo() {
    
    var xtInfo = LocksAPIModule.getxtInfo || {};
    var firefightInfo = xtInfo["02"] || [];
    var firefightDeviceobj = {
      "0201": [],
    };
    let areaId = this.currentArea.area;
    firefightInfo.map((k) => {
      if (areaId) {
        if (areaId === k.area) {
          firefightDeviceobj[k.sbValue] = firefightDeviceobj[k.sbValue] || [];
          firefightDeviceobj[k.sbValue].push(k);
        }
      } else {
        firefightDeviceobj[k.sbValue] = firefightDeviceobj[k.sbValue] || [];
        firefightDeviceobj[k.sbValue].push(k);
      }
    });
    // console.log("firefightDeviceobj:", firefightDeviceobj);

    return firefightDeviceobj;
  }
  // 2.区域房间图片处理
  get equipInfo() {
    var xtInfo = LocksAPIModule.getxtInfo || {};
    console.log(xtInfo);
    
    var firefightInfo = xtInfo["0201"] || [];
    const res = new Map();
    firefightInfo = firefightInfo.filter(
      (a) => !res.has(a.area) && res.set(a.area, 1)
    ); //去重
    // console.log(firefightInfo);

    var equip = [];
    firefightInfo.map((k, j) => {
      if (!k.areaName) {
        equip[j] = {
          name: "未知",
          area: "",
          src: this.equipOBJ["其他"],
        };
        return;
      }
      var onoff = true;
      for (let key in this.equipOBJ) {
        if (onoff) {
          if (k.areaName.indexOf(key) >= 0) {
            equip[j] = {
              name: k.areaName,
              area: k.area,
              src: this.equipOBJ[key],
            };
            onoff = false;
          } else {
            equip[j] = {
              name: k.areaName,
              area: k.area,
              src: this.equipOBJ["其他"],
            };
          }
        }
      }
    });
    // console.log("equip:", equip);
    if (equip.length <= 3) {
      this.colorLeft = 0;
      this.colorRight = 0;
    } else {
      this.colorLeft = 0;
      this.colorRight = 1;
    }
    console.log(equip)
    return equip;
  }

  // 3.圆柱数据
  get cylinderData() {
    var xtInfo = LocksAPIModule.getxtInfo || {};
    var firefightInfo = xtInfo["02"] || []; //消防
    var getterZxdw = GetSocketModule.zxdw; // 通讯状态的点位小数组
    var arrOffline = []; //离线点位小数组
    var arrgj = []; //告警点位小数组

    firefightInfo.map((k) => {
      getterZxdw.forEach((m, n) => {
        if (m === k.dwValue && k.value && k.value === 1) {
          arrOffline.push(k);
        }
      });
      if (k.isGj === "gj") {
        arrgj.push(k);
      }
    });
    // 每个小数组长度是设备离线数-一个设备对应一个通讯状态点位
    var firefightOfflineobj = {
      "0201": [],
    };
    arrOffline.forEach((item) => {
      firefightOfflineobj[item.sbValue] =
        firefightOfflineobj[item.sbValue] || [];
      firefightOfflineobj[item.sbValue].push(item);
    });

    // 每个小数组长度是设备告警数
    var firefightgjobj = {
      "0201": [],
    };
    var arrgjdwValue = _.uniqBy(arrgj, "deviceId");
    arrgjdwValue.forEach((item) => {
      firefightgjobj[item.sbValue] = firefightgjobj[item.sbValue] || [];
      firefightgjobj[item.sbValue].push(item);
    });
    var hzbjzj = this.getDeviceInfo["0201"] || [];
    var numberDevices = _.uniqBy(hzbjzj, "deviceId").length || 0;
    var offlineNumber = firefightOfflineobj["0201"].length || 0;
    var alarmNumber = firefightgjobj["0201"].length || 0;
    var onlineRate = "";
    // console.log(arrgj, firefightOfflineobj, firefightgjobj);
    var onlineNumber = Number(numberDevices) - Number(offlineNumber);
    if (numberDevices > 0) {
      onlineRate = (Number(onlineNumber) / Number(numberDevices)) * 100 + "%";
    } else {
      onlineRate = "0";
    }

    var arr = [
      {
        name: "设备数",
        value: numberDevices,
      },
      {
        name: "在线数",
        value: onlineNumber,
      },
      {
        name: "在线率",
        value: onlineRate,
      },
      {
        name: "告警数",
        value: alarmNumber,
      },
    ];
    // console.log("arr:", arr);

    return arr;
  }

  get tableData2() {
    var data = this.getDeviceInfo["0201"] || [];
    let deviceObj = {};
    //  将数据按照设备划分
    
    data.forEach((item) => {
      deviceObj[item.deviceId] = deviceObj[item.deviceId] || {
        deviceId: item.deviceId,
        deviceName: item.deviceName,
        isGj:'fgj',
        order:item.orderNum,
        isErr:'success',
        remoteType1: [],
        remoteType2: [],
        remoteType3: [],
        remoteType4: [],
      };
      let remoteType = item.remoteType;
      if (remoteType === "1") {
        deviceObj[item.deviceId].remoteType1.push(item);
      } else if (remoteType === "2") {
        deviceObj[item.deviceId].remoteType2.push(item);
      } else if (remoteType === "3") {
        deviceObj[item.deviceId].remoteType3.push(item);
      } else if (remoteType === "4") {
        deviceObj[item.deviceId].remoteType4.push(item);
      }
      if(item.isGj==='gj'){
        deviceObj[item.deviceId].isGj='gj'
      }
      if(item.isErr==='err'){
        deviceObj[item.deviceId].isErr='err'
      }
    });
    let tableData = [];
    for (let deviceId in deviceObj) {
      let tableItem = deviceObj[deviceId];
      tableData.push(tableItem);
    }
    
    tableData=tableData.sort((a,b)=>(a.order-b.order))
    console.log(tableData);
    
    return tableData;
  }

  mounted() {
    if (this.equipInfo.length > 3) {
      this.colorRight = 1;
    }
  }

  //向左
  left() {
    if (this.lefts == 0) {
      return;
    } else {
      this.colorRight = 1;
      this.lefts = this.lefts + 35;
      if (this.lefts == 0) {
        this.colorLeft = 0;
      }
    }
  }
  //向右
  right() {
    if (this.lefts <= -(this.equipInfo.length - 3) * 35) {
      return;
    } else {
      this.colorLeft = 1;
      this.lefts = this.lefts - 35;
      //   console.log(this.lefts);
      if (this.lefts == -(this.equipInfo.length - 3) * 35) {
        this.colorRight = 0;
      }
    }
  }
  //图片点击
  visited(index: number, item) {
    this.visi = index;
    this.currentArea = item;
    // console.log(item);
  }
  historyPopupStatus: boolean = false; //历史弹窗
  popupData = {};
  //表格-历史弹窗
  iconclick(value: Object) {
    this.popupData = value;
    console.log(this.popupData);
    
    this.historyPopupStatus = true;
  }
  handleClose() {
    this.historyPopupStatus = false;
  }
}
</script>

<style lang="scss" scoped>
.entranceguard-right {
  width: 100%;
  height: 100%;
  &-title {
    width: 1.31rem;
    height: 0.5rem;
    background: url("../../../../assets/img/Locks/mj-bg.png") no-repeat;
    background-size: 100% 100%;
    font-size: 0.2rem;
  }
  &-shuffl {
    width: 100%;
    height: 2rem;
    position: relative;
    // background-color: lightcoral;
    //左右ioc 按钮
    .icon {
      position: absolute;
      top: 50%;
      z-index: 999;
      color: #36b0eb;
      padding: 0.1rem;
      font-size: 0.2rem;
      cursor: pointer;
    }
    .icon-left {
      left: 2%;
      transform: rotate(180deg);
    }
    .icon-right {
      right: 2%;
    }
    .icons {
      color: #ccc;
    }
    //移动盒子
    .tans {
      position: absolute;
      width: 100%;
      height: 100%;
      transition: all 0.6s;
      top: 0;
    }
    .right-top-rotation {
      height: 100%;
      width: calc(100% - 0.8rem);
      margin: 0 0.4rem;
      overflow: hidden;
      position: relative;
      white-space: nowrap;
      .rotation-img {
        height: 100%;
        width: 34%;
        display: inline-block;
        position: relative;
        .bg {
          width: 1.6rem;
          height: 1.6rem;
          position: absolute;
          left: 50%;
          top: 40%;
          transform: translate(-50%, -50%);
          cursor: pointer;
        }
        .cont {
          width: 0.65rem;
          height: 0.5rem;
          position: absolute;
          left: 50%;
          top: 41%;
          transform: translate(-50%, -50%);
        }
        .rotation-text {
          position: absolute;
          left: 50%;
          top: 77%;
          transform: translateX(-50%);
          cursor: pointer;
        }
      }
      .visited {
        > .bg {
          transition: all 0.5s;
          width: 2.1rem;
          height: 2.1rem;
        }
        > .cont {
          transition: all 0.5s;
          width: 0.9rem;
          height: 0.7rem;
        }
        > .rotation-text {
          transition: all 0.5s;
          bottom: 1%;
          font-size: 0.18rem;
          color: #1ab2ff;
        }
      }
    }
  }
  &-equipment {
    width: 100%;
    height: 1.66rem;
    display: flex;
    justify-content: center;
    .single-box {
      width: 1.2rem;
      height: 1.26rem;
      margin-right: 0.07rem;
      position: relative;
    }
    .single-name {
      position: absolute;
      bottom: -0.2rem;
      left: 0.4rem;
      color: rgba(255, 255, 255, 0.85);
    }
    .single-value {
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    > :nth-child(1) {
      background: url("../../../../assets/img/Locks/equipment-blue.png")
        no-repeat;
      background-size: 100% 100%;
      .single-value {
        font-size: 0.24rem;
        color: #03bdfe;
        font-family: "numfont";
        position: absolute;
        // top: 0.35rem;
        // left: 0.45rem;
      }
    }
    > :nth-child(2) {
      background: url("../../../../assets/img/Locks/equipment-green.png")
        no-repeat;
      background-size: 100% 100%;
      .single-value {
        font-size: 0.24rem;
        color: #0efc9e;
        font-family: "numfont";
        position: absolute;
        // top: 0.35rem;
        // left: 0.45rem;
      }
    }
    > :nth-child(3) {
      background: url("../../../../assets/img/Locks/equipment-green.png")
        no-repeat;
      background-size: 100% 100%;
      .single-value {
        font-size: 0.24rem;
        color: #0efc9e;
        font-family: "numfont";
        position: absolute;
        // top: 0.35rem;
        // left: 0.35rem;
      }
    }
    > :nth-child(4) {
      background: url("../../../../assets/img/Locks/equipment-yellow.png")
        no-repeat;
      background-size: 100% 100%;
      .single-value {
        font-size: 0.24rem;
        color: #fe9f37;
        font-family: "numfont";
        position: absolute;
        // top: 0.35rem;
        // left: 0.42rem;
      }
    }
  }
  &-table {
    width: 100%;
    height: calc(100% - 2rem - 1.66rem - 0.2rem);
    margin-top: 0.1rem;
    box-sizing: border-box;
  }
}
</style>